<template>
  <div class="workform">
    <!-- <h2 class="nav_title">就业升学一览</h2> -->

    <el-input
      type="text"
      v-model.trim="work_username"
      class="FilterSearch"
      placeholder="请输入呢称，模糊搜索"
      @keyup.enter.native="FilterSearch"
    ></el-input>
    <br />

    <el-checkbox
      :indeterminate="isIndeterminate"
      v-model="checkAll"
      @change="handleCheckAllChange"
      >全选</el-checkbox
    >
    <div style="margin: 15px 0"></div>
    <el-checkbox-group
      v-model="checkedCities"
      @change="handleCheckedCitiesChange"
    >
      <el-checkbox v-for="city in cities" :label="city" :key="city">{{
        city
      }}</el-checkbox>
    </el-checkbox-group>

    <p class="saixuan">*点击标题栏进行筛选</p>

    <div class="tab_cover" :style="`max-width: calc(100vw - ${num}px);`">
      <el-table
        border
        :data="tableData"
        width="100%"
        v-if="tableData != []"
        @header-click="headerClick"
      >
        <el-table-column align="center" type="index" width="50">
        </el-table-column>
        <el-table-column
          align="center"
          prop="work_username"
          label="用户呢称"
          width="100"
          v-if="
            checkedCities.indexOf('用户呢称') == -1
              ? false
              : true && this.$store.state.userdata.shengfen == 2
          "
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="work_sex"
          label="性别"
          width="180"
          v-if="checkedCities.indexOf('性别') == -1 ? false : true"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="work_zhuanye"
          label="专业"
          width="180"
          v-if="checkedCities.indexOf('专业') == -1 ? false : true"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="work_biye_time"
          label="毕业时间"
          width="180"
          v-if="checkedCities.indexOf('毕业时间') == -1 ? false : true"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="work_xueli"
          label="学历"
          width="100"
          v-if="checkedCities.indexOf('学历') == -1 ? false : true"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="work_jiuye"
          label="就业情况"
          width="80"
          v-if="checkedCities.indexOf('就业情况') == -1 ? false : true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="work_danwei"
          label="单位名称"
          width="200"
          v-if="checkedCities.indexOf('单位名称') == -1 ? false : true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="work_shengyuan"
          label="生源地区"
          width="200"
          v-if="checkedCities.indexOf('生源地区') == -1 ? false : true"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="work_kun_grade"
          label="困难级别"
          width="80"
          v-if="checkedCities.indexOf('困难级别') == -1 ? false : true"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="work_fangshi"
          label="培养方式"
          width="80"
          v-if="checkedCities.indexOf('培养方式') == -1 ? false : true"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="work_xuezhi"
          label="学制"
          width="70"
          v-if="checkedCities.indexOf('学制') == -1 ? false : true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="work_dizhi"
          label="单位所在省份或市"
          width="200"
          v-if="checkedCities.indexOf('单位所在省份或市') == -1 ? false : true"
        >
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      v-show="isPageShow"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 8, 10, 20]"
      :page-size="8"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 筛选条件 -->
    <el-dialog title="筛选条件" :visible.sync="dialogFormVisible">
      <el-form :model="form" ref="form">
        <el-form-item label="请选择专业" :label-width="formLabelWidth">
          <el-cascader
            v-model="form.work_zhuanye"
            :options="options1"
          ></el-cascader>
        </el-form-item>

        <el-form-item label="请选择毕业时间" :label-width="formLabelWidth">
          <el-select v-model="form.work_biye_time" placeholder="请选择毕业时间">
            <el-option label="2020" value="2020"></el-option>
            <el-option label="2019" value="2019"></el-option>
            <el-option label="2018" value="2018"></el-option>
            <el-option label="2017" value="2017"></el-option>
            <el-option label="2016" value="2016"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="请选择学历" :label-width="formLabelWidth">
          <el-select v-model="form.work_xueli" placeholder="请选择学历">
            <el-option label="本科" value="本科"></el-option>
            <el-option label="研究生" value="研究生"></el-option>
            <el-option label="博士" value="博士"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="请选择就业情况" :label-width="formLabelWidth">
          <el-select v-model="form.work_jiuye" placeholder="请选择就业情况">
            <el-option label="升学" value="升学"></el-option>
            <el-option label="就业" value="就业"></el-option>
            <el-option label="灵活就业" value="灵活就业"></el-option>
            <el-option label="待就业" value="待就业"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm()">清 空</el-button>
        <el-button type="primary" @click="handleChange()">筛 选</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  filterForms,
  getallStudentForm,
  filterEcharts,
  getStructure,
  sendEchartsStructure,
  sendSexstract,
} from "@/api/data";

import {arr1,arr2,cities} from "@/tool/data.js"

import { regionData } from "element-china-area-data";
import { showName } from "@/tool";
export default {
  data() {
    return {
      // num:260,
      checkAll: false,
      checkedCities: [
      
      ], // 默认选中的
      cities: [], // 所有的列标题
      isIndeterminate: true,
      isPageShow: true,
      dizhi: regionData,
      currentPage: 1, // 当前页
      pageSize: 8, // 每页多少条
      total: 0,
      tableData: [],
      work_username: "", // 保存模糊搜索的值
      // gridData: [
      //   {
      //     date: "2016-05-02",
      //     name: "王小虎",
      //     address: "上海市普陀区金沙江路 1518 弄",
      //   },
      //   {
      //     date: "2016-05-04",
      //     name: "王小虎",
      //     address: "上海市普陀区金沙江路 1518 弄",
      //   },
      //   {
      //     date: "2016-05-01",
      //     name: "王小虎",
      //     address: "上海市普陀区金沙江路 1518 弄",
      //   },
      //   {
      //     date: "2016-05-03",
      //     name: "王小虎",
      //     address: "上海市普陀区金沙江路 1518 弄",
      //   },
      // ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        work_biye_time: "",
        work_xueli: "",
        work_jiuye: "",
        work_zhuanye: [],
      },
      options1: [],
      formLabelWidth: "120px",
    };
  },
  computed: {
    num() {
      if (this.$store.state.isCollapse) {
        return 104;
      } else {
        return 260;
      }
    },
  },
  async mounted() {
    // 依据用户身份显示不同的多选项
    this.cities=cities
    this.checkedCities=this.$store.state.userdata.shengfen==0?arr1:arr2
    this.cities = showName(this.$store.state.userdata.shengfen, this.cities);
    let data1 = await getStructure();
    if (data1.data.length > 0) {
      //将结构保存
      this.options1 = data1.data[0].institutionalStructure;
    }
    await this.handleChange();

    // 预加载 第二张echarts 就业升学一览
    let echartsList = sessionStorage.getItem("echartsList");
    if (!echartsList) {
      let data = await filterEcharts({
        work_biye_time: "",
        work_xueli: "",
        work_jiuye: "",
        work_zhuanye: [],
      });

      if (data.code == 200) {
        let length1 = data.data.length;
        // console.log("i",i)
        let obj1 = {
          name: "毕业人数",
          type: "line",
          // stack: "总人数",
          data: [0, 0, 0, 0, 0],
        };
        for (let i = 0; i < length1; i++) {
          for (let j = 0; j < data.data[i].data.length; j++) {
            obj1.data[j] += data.data[i].data[j];
            // console.log("j",j)
          }
        }
        data.data.push(obj1);

        // 将数据保存起来

        sessionStorage.setItem("echartsList", JSON.stringify(data.data));
      }
    }

    // 预加载 第三张echarts图表
    let data2 = sessionStorage.getItem("echarts1");
    if (!data2) {
      let data = await sendEchartsStructure();

      let arr1 = [0, 0, 0, 0, 0];
      let series = data.data;
      for (let i = 0; i < series.length; i++) {
        for (let j = 0; j < series[i].data.length; j++) {
          arr1[j] += series[i].data[j];
        }
      }

      for (let i = 0; i < series.length; i++) {
        for (let j = 0; j < series[i].data.length; j++) {
          series[i].data[j] = this.toPercent(series[i].data[j] / arr1[j]);
        }
      }

      this.series = series;
      sessionStorage.setItem("echarts1", JSON.stringify(series));
    }

    // 预加载 第四张echarts
    let datalist = sessionStorage.getItem("sendSexstract");
    if (!datalist) {
      let data = await sendSexstract();
      this.series = data.data;
      sessionStorage.setItem("sendSexstract", JSON.stringify(data.data));
    }
  },
  methods: {
    // 将小数转为百分数
    toPercent(point) {
      var str = Number(point * 100).toFixed(2);
      str;
      return str;
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cities : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },

    // 条件搜索
    async handleChange() {
      this.isPageShow = true;
      this.dialogFormVisible = false;
      // console.log(this.form)
      let data = await filterForms({
        num: this.currentPage,
        pageSize: this.pageSize,
        work_biye_time: this.form.work_biye_time,
        work_xueli: this.form.work_xueli,
        work_jiuye: this.form.work_jiuye,
        work_zhuanye: this.form.work_zhuanye || [],
      });
      if (data.code == 200) {
        this.total = data.count;
        this.tableData = data.data;
        // console.log(this.tableData);
      } else {
        this.$message.error(data.msg);
      }
    },

    // 清空条件
    resetForm() {
      this.form = {
        work_biye_time: "",
        work_xueli: "",
        work_jiuye: "",
        work_zhuanye: [],
      };
    },

    headerClick(val) {
      // console.log(val.property);
      this.dialogFormVisible = true;
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.handleChange();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.handleChange();
    },

    // 模糊查询获取对应消息
    async FilterSearch() {
      if (this.work_username.length == 0) {
        this.isPageShow = true;
        return this.handleChange();
      }

      let data = await getallStudentForm({
        work_username: this.work_username,
      });

      if (data.code == 200) {
        this.isPageShow = false;
        this.total = data.count;
        this.tableData = data.data;
        // console.log(this.tableData);
      } else {
        this.$message.error(data.msg);
      }
    },
  },
};
</script>

<style>
.workform {
  padding: 20px;
}
.el-table {
  width: 100% !important;
}
.saixuan {
  height: 40px;
  line-height: 40px;
  color: brown;
  font-size: 14px;
}

.el-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.FilterSearch {
  width: 200px;
  margin-bottom: 20px;
}
.el-checkbox-group {
  margin-bottom: 15px;
}
</style>